<template>
  <div class="index-form form-contain">
    <div class="index-right">
       <div class="index-ssbanner">什么是搜索引擎广告？</div>
      <div class="index-ssdetalis">
     搜索引擎广告终端载体有PC和手机端，包括关键词广告 、竞价排名广告 、地址栏搜索广告和网站登录广告等多种形式。
      </div>
       <div class="ssadvertising">
        您的广告可以展示在这里
      </div>
      <div class="ssfriends">
         <img src="static/images/图层 4@3x.png">
         <span>品牌广告</span> 
        <span  :style ="note"><img src="static/images/ss-1.png"> </span>
        <span  :style ="note2"> <img src="static/images/ss-2.png"></span>
          <img src="static/images/图层 4@3x.png">
         <span>导航广告</span> 
        <span  :style ="note3"><img src="static/images/ss-3.png"></span>
      </div>
        
     
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: [],
      imgList: [],
       note: {
            backgroundImage: "url(static/images/mobile-border3.png)",
            backgroundRepeat: "no-repeat",
          },
          note2: {
            backgroundImage: "url(static/images/pc-border2.png)",
            backgroundRepeat: "no-repeat",
          },
           note3: {
            backgroundImage: "url(static/images/pc-border.png)",
            backgroundRepeat: "no-repeat",
          },
    }
  },
  created () {
  },
  methods: {}
}
</script>

<style lang="less">
.index-form{
  .el-upload-list__item,
  .el-upload--picture-card{
    height: 100px;
    width: 200px;
  }
  .el-upload--picture-card{
    line-height: 100px;
  }
  .index-left{
    float: left;
    width: 10%;
    p{
      color: #101010;
      text-align: right;
      line-height: 200px;
      span{
        color: rgb(229, 28, 35);
      }
    }
  }
  .index-ssbanner{
    width:9.3125rem;
height:.8125rem;
font-size:.875rem;
font-weight:400;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .9375rem;
letter-spacing:.0235rem;
text-align:center;
  }
  .index-ssdetalis{
    width:21rem;
height:3.6875rem;
font-size:.75rem;
font-weight:400;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .9375rem;
letter-spacing:.1235rem;
  }
   .ssadvertising{
    width:8.875rem;
height:.6875rem;
font-size:.625rem;
font-weight:400;
color:rgba(51,51,51,1);
margin: 0 auto;
text-align: center;
  }
  .ssfriends{
    width: 100%;
    height: auto;
    margin: 0 auto;
margin-top: .9375rem;
    img:nth-child(1){
      display: block;
      width: 6.5625rem;
      height: 2rem;
      text-align: center;
      margin: 0 auto;
    }
    span:nth-child(2){
      display:block;
      width:4.3125rem;
height:.4375rem;
font-size:.73rem;
font-weight:400;
color:rgba(255,255,255,1);
margin: 0 auto;
    position: absolute;
    left: 44%;
    top: 11.5rem;
    }

   span:nth-child(3){
             background-size:3.125rem 6.5rem;
               margin: 0 auto;
               display:block;
               width: 3.125rem;
               height: 6.5rem;
     img:nth-child(1){
      display: block;
      width: 2.5rem;
      height: 5.0625rem;
      padding-top: .5625rem;
    }
   }
     span:nth-child(4){
             background-size:10.8125rem 7.0625rem;
               margin: 0 auto;
               display:block;
               width: 10.8125rem;
               height:  7.0625rem;
               margin-top: .9375rem;
     img:nth-child(1){
      display: block;
      width:10.3125rem;
      height: 5.375rem;
      padding-top: .5625rem;
    }
   }
    img:nth-child(5){
      display: block;
      width: 6.5625rem;
      height: 2rem;
      text-align: center;
      margin: 0 auto;
      margin-top: .9375rem;
    }
    span:nth-child(6){
      display:block;
      width:4.3125rem;
height:.4375rem;
font-size:.73rem;
font-weight:400;
color:rgba(255,255,255,1);
margin: 0 auto;
    position: absolute;
    left: 44%;
    top:29rem;
    }
     span:nth-child(7){
             background-size:13.375rem 8.25rem;
               margin: 0 auto;
               display:block;
               width: 13.375rem;
               height:8.25rem;
               margin-top: .9375rem;
     img:nth-child(1){
      display: block;
      width:8rem;
      height:5.25rem;
      padding-top: 1.25rem;
    }
   }
  }
}
</style>
